/**
 * Author: Shen Yanqiu
 * Date: 2017-12-08
 * Time: 17:48
 *
 */
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Button, Row, Col, Form, Input } from 'antd';
import { config } from 'utils';
import styles from './index.less';

class ForgetPassword extends React.Component {
  static propTypes = {
    form: PropTypes.object,
    dispatch: PropTypes.func,
    loading: PropTypes.object,
    forgetPassword: PropTypes.object,
  };

  constructor (props) {
    super(props);
    this.state = {};
  }

  // 验证两次密码是否一致
  checkPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('');
    } else {
      callback();
    }
  };
  checkConfirm = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  };

  render () {
    const {
      loading,
      dispatch,
      forgetPassword,
      form: {
        getFieldDecorator,
        validateFieldsAndScroll,
        getFieldValue,
        validateFields,
      },
    } = this.props;
    // 获取手机号码 进行发送验证
    const getCode = () => {
      validateFields(["mobile"], (error, values) => {
        console.log(values);
        if (error) {
          return ;
        }
        const params = { mobile: values.mobile };
        if (values.mobile) {
          dispatch({ type: 'forgetPassword/getCode', payload: params });
        }
      });
    };
    // 点击确认
    const handleOK = () => {
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          return;
        }
        values.code = Number(values.code);
        dispatch({ type: 'forgetPassword/doforgetPassword', payload: values });
      });
    };

    return (
      <div className={styles.form}>
        <div className={styles.logo}>
          <img alt={'logo'} src={config.logo} />
          <span>{config.name}</span>
        </div>
        <form>
          <Form.Item hasFeedback>
            {getFieldDecorator('mobile', {
              rules: [
                {
                  len: 11,
                  message: "请输入11位手机号",
                },
                {
                  pattern: /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/,
                  message: "请输入正确！",
                }
              ],
            })(<Input size="large" onPressEnter={handleOK} placeholder="手机号" />)}
          </Form.Item>
          <Form.Item>
            <Row gutter={8}>
              <Col span={13}>
                {getFieldDecorator('code', {
                  rules: [{ required: true, whitespace: true, message: '验证码不能为空！' }],
                })(
                  <Input placeholder="验证码" />
                )}
              </Col>
              <Col span={11}>
                <Button type="primary" onClick={getCode} loading={loading.effects['forgetPassword/getCode']}>获取验证码</Button>
              </Col>
            </Row>
          </Form.Item>
          <Form.Item hasFeedback>
            {getFieldDecorator('password', {
              rules: [
                {
                  required: true,
                  message: "密码不能为空！",
                },
                {
                  min: 6,
                  message: "密码不能少于6位！",
                }, {
                  validator: this.checkConfirm,
                },
              ],
            })(<Input size="large" type="password" onPressEnter={handleOK} placeholder="密码" />)}
          </Form.Item>
          <Form.Item hasFeedback>
            {getFieldDecorator('confirmPassword', {
              rules: [
                {
                  required: true,
                  message: "确认密码不能为空！",
                },{
                  validator: this.checkPassword,
                  message: "两次密码不一致！",
                },
              ],
            })(<Input size="large" type="password" onPressEnter={handleOK} placeholder="确认密码" />)}
          </Form.Item>
          <Row>
            <Button type="primary" size="large" onClick={handleOK} loading={loading.effects['forgetPassword/doforgetPassword']}>
              确定
            </Button>
          </Row>
        </form>
      </div>
    );
  }
}

export default connect(({ loading }) => ({ loading }))(Form.create({})(ForgetPassword));
